<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的订单</title>


    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/myceair.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/customerinfo.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/ordershow.css}">
    <script th:src="@{/js/jquery-1.8.3.min.js}" type="text/javascript"></script>
    <script language="javascript" th:src="@{/My97DatePicker/WdatePicker.js}"></script>
</head>

<body>
<!--header-->
<header id="header">
    <hgroup>

        <address class="text blue">
            <p style="font-size: 15px">欢迎您，<span th:text="${session.customer.username}"></span>&nbsp;&nbsp;<a th:href="@{/home/logout}" style="color: #fff">退出</a></p>
        </address>

        <div class="clear"></div>
    </hgroup>
</header>
<!--end header-->

<!--menu-->
<menu id="menu">
    <nav style="margin-top: -12;">
        <ul class="menu_index">
            <a th:href="@{/home/customerinfo}">
                <li id="menu-myceair"
                    class="current">我的信息<i></i></li>
            </a>
            <a href="/home/index">
                <li id="menu-booking">预订行程<i></i></li>
            </a>
        </ul>
    </nav>
</menu>
<!--end content-->

<!-- 第一个下拉菜单 -->

<section class="menu-dropdown"
         id="dropdown-booking">
    <div id="main-area">

        <div class="position gray">
            您的位置：<a href="index.jsp">首页</a> &gt;
            <h1>我的东航</h1>
        </div>

        <div class="myceair">
            <div class="left">
                <div class="home"></div>

                <div class="menu font14 bold m1">
                    <a th:href="@{/home/customerinfo}">个人信息</a>
                </div>

                <div class="menu font14 bold m2">
                    <a th:href="@{/home/myorder}">机票订单</a>
                </div>
                <div class="child"></div>
                <div class="menu font14 bold m9">
                    <a th:href="@{/home/editcustomerpassword}">更改密码</a>
                </div>
            </div>
            <div class="right" style="padding-left: 0px;">
                <div class="personal_info" id="switch">

                    <div class="b_content active" rel="tab1">

<!--                        <fieldset class="searchForm">-->
<!--                            <form name="formSearch">-->
<!--                                <p>-->
<!--                                    <span>* 初始查询结果仅向您显示7天内的信息</span>-->
<!--                                </p>-->
<!--                                <dl>-->
<!--                                    <dt class="normal">-->
<!--                                        <div class="optional">-->
<!--                                            <h4 style="padding-left:10px;">-->
<!--                                                <font>订单号</font>-->
<!--                                                <mark class="icon triDown"></mark>-->
<!--                                            </h4>-->
<!--                                        </div>-->
<!--                                        <input style="width: 300px;" type="text" name="exactQuery" id="orderid"-->
<!--                                               class="input" value="" cond="pnrNo" maxlength="6"> <input-->
<!--                                            type="hidden" name="orderType" value="01">-->
<!--                                    </dt>-->
<!--                                    <dd>-->
<!--                                        <input type=button name="search" class="button-search" id="button-search"-->
<!--                                               value="查 询" style="height:34px;">-->
<!--                                    </dd>-->
<!--                                </dl>-->
<!--                                <br>-->
<!--                                <dl class="advance" style="display: block;">-->
<!--                                    <dt>-->
<!--                                        预订日期 <input type="text" class="input date" id="date"-->
<!--                                                    onfocus="WdatePicker()">-->
<!--                                        <input type="button" value="查询" id="orderdate">-->
<!--                                    </dt>-->
<!--                                </dl>-->
<!--                                <mark id="oldOrderSearch"-->
<!--                                      onclick="javascript:location.href='http://easternmiles.ceair.com/myceair/old_order.html';">-->
<!--                                    <a href="http://easternmiles.ceair.com/myceair/old_order.html"></a></mark>-->
<!--                            </form>-->

<!--                        </fieldset>-->

                        <article class="dataList">

                            <ul class="head" style="margin-left:-1px; width: 742px; margin-top: 8px;">
                                <li class="c1" style="width: 140px; margin-top: 8px;">订单</li>
                                <li class="c2" style="width: 220px; margin-top: 8px;">航班信息</li>
                                <li class="c3" style="width: 80px; margin-top: 8px;">乘机人</li>
                                <li class="c4"
                                    style=" text-align:center; width: 100px; margin-top: 8px;">总价
                                </li>
                                <li class="c5" style="width: 100px; margin-top: 8px;">订单状态</li>
                                <li class="c6" style="width: 100px; margin-top: 8px;">操作</li>
                                <div class="clear"></div>
                            </ul>
                            <ul name="orderInfo" th:each="order : ${orderList}">
                                <li class="c1">订单Id：<span th:text="${order.id}"></span>
                                    <br> 下单时间<br> <span th:text="${#dates.format(order.addDate, 'yyyy-MM-dd HH:mm')}"></span><br>
                                    <br> <a class="blue" name="orderNo" target="_blank"
                                            th:href="@{'/home/orderdetail?id='+${order.id}}">查看订单详情
                                        》</a></li>
                                <li class="c2" style="width: 220px;"><b
                                        title="白云机场 -虹桥机场 T2"> <br> <span
                                        class="airport"><span th:text="${order.flight.startPlace}"></span>&nbsp;<span th:text="${order.flight.startAirport}"></span> </span> -- <span
                                        class="airport"><span th:text="${order.flight.endPlace}"></span>&nbsp;<span th:text="${order.flight.endAirport}"></span></span>
                                </b>
                                    <time><span th:text="${#dates.format(order.flight.startDate, 'HH:mm')}"></span>-<span th:text="${#dates.format(order.flight.endDate, 'HH:mm')}"></span></time>
                                    <span th:text="${#dates.format(order.flight.startDate, 'yyyy-MM-dd')}"></span><br></li>
                                <li class="c3"
                                    style="width:80px; padding-top:35px; padding-bottom: 44px; border-right: 1px #ccc solid;">
                                    <span><span th:text="${order.customerName}"></span> </span>
                                </li>
                                <li class="c4"
                                    style="width:80px; padding-top:35px; padding-bottom: 44px; text-align: center; border-right: 1px #ccc solid;">
                                    <span class="red">￥ <span th:text="${order.price}"></span></span>
                                    <aside class="tips long"
                                           name="INSTips" style="top: -64px; opacity: 0; display: none;">
                                        <p></p>
                                        <mark class="icon boxTri"></mark>
                                    </aside>
                                </li>
                                <li class="c5"
                                    style="border-right: 1px #ccc solid; padding-top:35px; padding-bottom: 44px;">
                                    <span th:text="${order.state==0}?'等待付款':''"></span>
                                    <span th:text="${order.state==1}?'已付款(等待确认)':''"></span>
                                    <span th:text="${order.state==2}?'已失效':''"></span>
                                </li>
                                <li class="c6 tall"
                                    style="width:90px;  padding-bottom: 44px; padding-top: 35px;">
                                    <div th:if="${order.state==0}">
                                        <a th:href="@{'/home/updateState?id='+${order.id}+'&state=1'}">付款</a>&nbsp;&nbsp;
                                        <a th:href="@{'/home/updateState?id='+${order.id}+'&state=2'}">取消</a>
                                    </div>
                                    <div th:if="${order.state==1}">
                                        <a th:href="@{'/home/updateState?id='+${order.id}+'&state=2'}">取消</a>
                                    </div>
                                    <span th:text="${order.state==2}?'已失效':''"></span>
                                </li>
                                <div class="clear"></div>
                            </ul>
                        </article>
                    </div>
                    <div style="margin-top:20px; float: right;">


                    </div>
                </div>
            </div>
        </div>

        <div class="bottom_banner" style="z-index:-10; margin-left: -20;">
<!--            <img src="http://pic.c-ctrip.com/vacation_v2/bottom_banner1.jpg"-->
<!--                 class="bottom_banner_l" alt="吉祥航空" width="353" height="111"><img-->
<!--                src="http://pic.c-ctrip.com/vacation_v2/bottom_banner2.jpg"-->
<!--                class="bottom_banner_m" alt="瑞士国际航空公司" width="280" height="111"><img-->
<!--                src="http://pic.c-ctrip.com/vacation_v2/bottom_banner3.jpg"-->
<!--                class="bottom_banner_r" alt="日本航空" width="356" height="111">-->
        </div>

    </div>

</section>
<script type="text/javascript">
    $("#button-search").click(function () {
        var id = $("#orderid").val();
        window.location = 'findByOrderIdOrderAction.action?orderId=' + id;
    });
    $("#orderdate").click(function () {
        var date = $("#date").val();
        window.location = 'findByDateOrderAction.action?date=' + date;
    });

    function pay(id) {
        var conf = confirm('确认付款！');
        if (conf) {
            window.location = 'paymentOrderAction.action?orderId=' + id;
        }
    }

    bounce

    function cancel(id) {
        var conf = confirm('取消订单');
        if (conf) {
            window.location = 'cancelOrderAction.action?orderId=' + id;
        }
    }

    function bounce(id) {
        var conf = confirm('确定退票');
        if (conf) {
            window.location = 'bounceOrderAction.action?orderId=' + id;
        }
    }
</script>


</body>
</html>



